﻿@inherits WebViewPage<Umbraco.Cms.Web.PropertyEditors.TreeMultiNodePicker.TreeMultiNodePickerEditorModel>
@using Umbraco.Cms.Web;
@using ClientDependency.Core;
@using ClientDependency.Core.Mvc;
@using System.Web.Helpers;
@using System.Web.Mvc;
@using System.Web.Mvc.Ajax;
@using System.Web.Mvc.Html;
@using System.Web.Routing;
@using System.Web.WebPages;
@using Microsoft.Web.Mvc;

<script type="text/javascript">
	function tmnpClick(e, args) {
		console.log(arguments);

		var hiddenFieldName = '@Html.NameFor(x => Model.Value)';

		var hiveId = new $u.Sys.HiveId(args.node.data("jsonId"));
		var id = hiveId.rawValue();

//		console.log(args.node);
//		console.log(args.node.data("jsonId"));

		// check that there isn't a matching selected item already (to prevent duplicate selections) 
		if ($('#selectedNodes li[data-hive-id= ' + hiveId.rawValue() + ']').length == 0)
		{
			$('#selectedNodes').append('<li data-hive-id=\"' + id + '\">' + args.node.find('a')[0].innerHTML + '<input type="hidden" name="' + hiddenFieldName + '" value="' + id + '"/></li>');
		}

	}
</script>

<h2>MTNP Prototype</h2>
<div class="property-pane clearfix">
    <div class="box dialog-tree" style="float:left;width:300px;">
        @Html.RenderTree(Model.TreeRenderModel)
    </div>

	<div class="box dialog-tree" style="float:left;width:300px;">
		<ul id="selectedNodes">
		</ul>
	</div>

	<div style="float:left;">
		@Html.NameFor(x => Model.Value)
		<br />
		@Model.Value
		<br />
		@Model.Value.Count
		<br />
		@foreach (var value in Model.Value)
  {
	  @value
	  <br />
  }
	</div>

</div>